<style lang="scss" scoped>
@import '../../style/mixin-rem.scss';
// 书籍阅读器
.book-reader {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  padding: 0 rem(40px);
}
.content-item {
  .title {
    font-size: rem(48px);
    padding-top: rem(80px);
  }
  .content {
    font-size: rem(36px);
  }
}
</style>

<template>
  <div class="book-reader" ref="wrapper">
    <div>
      <div class="content-item" v-for="item of content" :key="item.id">
        <div class="title" v-text="item.title"></div>
        <div class="content" v-html="item.content"></div>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'

export default {
  name: 'book-reader',
  data () {
    return {
      BScroll: {}
    }
  },
  computed: {
    content () {
      return this.$store.state.bookReader.content
    }
  },
  created () {
    this.initContent()
  },
  mounted () {
    this.$nextTick(
      this.initBScroll()
    )
  },
  methods: {
    initBScroll () {
      let wrapper = this.$refs.wrapper
      this.BScroll = new BScroll(wrapper, {
        click: true
      })
    },
    initContent () {
      let id = this.$route.params.id
      this.$store.dispatch('bookReader/getChapterData', id)
    }
  }
}
</script>
